<template>
	<view class="content">
		<view class="left" v-if=' state < 4'>
			<view class="title">
				<text>开始注册</text>
				<image src="https://img.wilmer.com.cn/admin/2024/6-7/%E7%BC%96%E7%BB%84%2020%402x.png" mode=""></image>
			</view>
			<view class="dataLine special">
				<view class="spt"></view><text class="version">输入你的手机号</text>
				<view class="VerticalLine"></view>
			</view>
			<view class="dataLine" :class="{special: state >= 2}">
				<view class="spt"></view><text class="version">确认密码</text>
				<view class="VerticalLine"></view>
			</view>
			<view class="dataLine" :class="{special: state >= 3}">
				<view class="spt"></view><text class="version">个人信息</text>
				<view class="VerticalLine"></view>
			</view>
			<view class="dataLine">
				<view class="spt"></view><text class="version">完成注册</text>
			</view>
			<image class="iconImg" src="https://img.wilmer.com.cn/admin/2024/6-7/Image-9%402x.png" mode=""></image>
		</view>
		<view class="right" v-if=' state < 4'>
			<!-- 填写你的手机号 -->
			<view class="FillPhone" v-if="state == 1">
				<text class="title">填写你的手机号</text>
				<view class="UserInput" style="margin-top: 66px;">
					<text class="iconTitle">手机号</text>
					<view class="DataBox">
						<view class="iconRegion">
							+86
						</view>
						<up-input :fontSize='24' placeholder="请输入手机号码" border="surround" v-model="phone" type='number'
							clearable maxlength="11"></up-input>
					</view>
				</view>
				<view class="UserInput" style="margin-top: 33px;">
					<text class="iconTitle">验证码</text>
					<up-code-input v-model="code" :maxlength="6" :size="72"></up-code-input>
				</view>
				<view class="messageBox">
					<image class="messageImg"
						src="https://img.wilmer.com.cn/admin/2024/6-7/%E7%BC%96%E7%BB%84%402x%20%281%29.png" mode="">
					</image>
					<view class="information">
						<view class="timTitle">
							<text class="one">短信验证码已发送至你的手机</text>
							<text class="two" v-if="phone">+86 {{ phone }}</text>
						</view>
						<text class="timing" :class="{special: count==0 && phone !=''}"
							@click="onCode">{{count==0? "发送验证码":'重新发送'}}
							{{count==0?' ':"（"+ count + 's）'}} </text>
					</view>
				</view>
			</view>
			<!-- 确认密码 -->
			<view class="confirmPassword FillPhone" v-if="state == 2">
				<text class="title">输入你的密码</text>
				<view class="UserInput" style="margin-top: 66px;">
					<text class="iconTitle">输入密码</text>
					<view class="DataBox">
						<up-input placeholder="请输入内容" border="surround" clearable v-model="password"></up-input>
					</view>
				</view>
				<view class="UserInput" style="margin-top: 33px;">
					<text class="iconTitle">确认密码</text>
					<view class="DataBox">
						<up-input :fontSize='20' placeholder="请输入内容" border="surround" clearable
							v-model="ConfirmPassword"></up-input>
					</view>
				</view>
			</view>
			<!-- 个人中心 -->
			<view class="FillPhone userInfo" v-if="state == 3">
				<text class="title">个人信息</text>
				<view class="dataFlex" style="margin-top: 140px;">
					<div class="FlexItem">
						<text class='title'>姓名</text>
						<view style="height: 72px;width: 400px;display: flex;">
							<up-input :fontSize='20' placeholder="请输入内容" border="surround" clearable
								v-model="name"></up-input>
						</view>
					</div>
					<div class="FlexItem">
						<text class='title'>年级</text>
						<view style="height: 72px;width: 400px;display: flex;">
							<yh-select :data="gradeData" v-model="grade_id" :format='formatobj' :height='144' :top='150'
								:clearble='true'></yh-select>
						</view>
					</div>
				</view>
				<view class="dataFlex" style="margin-top: 60px;">
					<div class="FlexItem">
						<text class='title'>年龄</text>
						<view style="height: 72px;width: 400px;display: flex;">
							<up-input :fontSize='20' placeholder="请输入年龄" border="surround" type='number' clearable
								v-model="age"></up-input>
						</view>
					</div>
					<div class="FlexItem">
						<text class='title'>性别</text>
						<view style="height: 72px;width: 400px;display: flex;">
							<yh-select :data="sexData" v-model="sex" :height='144' :top='150'
								:clearble='true'></yh-select>
						</view>
					</div>
				</view>
			</view>
			<div class="HorizontalLine"></div>
			<view class="BtnLine">
				<view class="PreviousBtn" hover-class="checkActive" hover-stay-time='200' @click="onPrevious()"
					:class="{hide: state == 1}">
					<image src="https://img.wilmer.com.cn/admin/2024/6-7/%E7%BC%96%E7%BB%84%402x%20%282%29.png" mode="">
					</image>
					<text>上一步</text>
				</view>
				<view class="NextBtn" hover-class="checkActive" hover-stay-time='200' @click="onNext()"
					:class="{hide: state > 3}">
					<text>{{ state >= 3 ? '完成注册' : '下一步' }}</text>
					<image v-if="state < 3"
						src="https://img.wilmer.com.cn/admin/2024/6-7/icn%EF%BC%8Fgeneral%EF%BC%8Farrow%EF%BC%8Fgo%EF%BC%8Fwhite%402x.png"
						mode=""></image>
				</view>
			</view>
		</view>

		<!-- 完成注册 -->
		<view class="registration" v-if="state == 4">
			<view class="firstTitle">
				<text>完成注册</text>
				<image src="https://img.wilmer.com.cn/admin/2024/6-7/j%E5%8A%A0%E6%B2%B9.png" mode=""></image>
			</view>
			<view class="btn" @click="Gohome()">进入主页</view>
			<image class="bottomImg" src="https://img.wilmer.com.cn/admin/2024/6-7/0011.png" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import {
		sendSms,
		studentRegister,
		gradeList,
		checkSms
	} from '@/common/api/login.js'
	import yhSelect from "@/components/yh-select/yh-select.vue"

	import {
		ref,
		reactive,
		onMounted
	} from "vue"
	const state = ref(1) // 1 填写你的手机号 2 确认密码 3个人信息 

	const value = ref('')

	const gradeData = ref([])
	const formatobj = ref({
		label: 'title',
		value: 'id'
	})

	function grade() {
		gradeList().then(res => {
			gradeData.value = res.data
		})
	}
	grade()

	const sex = ref('')
	const sexData = ref([{
		value: "男",
		label: '男'
	}, {
		value: "女",
		label: '女'
	}])

	const age = ref('')
	const name = ref('')


	// 填写你的手机号
	const phone = ref('') // 手机号码
	const codeState = ref(false) // 短信验证码
	const phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/; // 手机号校验
	const count = ref(0)
	const totalSec = ref(60)
	const timer = ref(null)

	function onCode() {
		if (phone.value == '') {
			uni.showToast({
				title: "请输入手机号，再尝试",
				icon: 'none'
			});
			return false
		} else if (!phoneReg.test(phone.value)) {
			uni.showToast({
				title: "手机号码格式不正确",
				icon: 'none'
			});
			return false
		} else if (phoneReg.test(phone.value) && count.value == 0) {
			sendSms({
				phone: phone.value
			}).then(res => {
				if (res.code == 1) {
					// 开启倒计时
					countDown()
					uni.showToast({
						title: "发送成功",
						icon: 'none'
					});
					codeState.value = true
				}
			})
		}
	}

	function countDown() {
		count.value = totalSec.value;
		timer.value = setInterval(() => {
			count.value--;
			if (count.value == 0) {
				clearInterval(timer.value);
			}
		}, 1000)
	}

	const code = ref('') // 短信验证码

	const phoneCode = ref(false)

	// 密码
	const password = ref('')
	const ConfirmPassword = ref('')


	// 个人资料
	const grade_id = ref('')


	function onPrevious() {
		if (state.value > 1) {
			state.value -= 1
		}
	}

	function onNext() {
		if (state.value == 1) {
			if (phone.value == '') {
				uni.showToast({
					title: "请输入手机号，再尝试",
					icon: 'none'
				});
				return false
			} else if (!phoneReg.test(phone.value)) {
				uni.showToast({
					title: "手机号码格式不正确",
					icon: 'none'
				});
				return false
			} else if (code.value == '') {
				uni.showToast({
					title: "请输入验证码",
					icon: 'none'
				});
				return false
			}

			checkSms({
				phone: phone.value,
				code: code.value
			}).then(res => {
				if (res.code == 1) {
					state.value += 1
				}
			})

		} else if (state.value == 2) {
			if (password.value == '') {
				uni.showToast({
					title: "请输入密码",
					icon: 'none'
				});
			} else if (password.value != ConfirmPassword.value) {
				uni.showToast({
					title: "请确保前后两次密码一致",
					icon: 'none'
				});
			} else {
				state.value += 1
			}
		} else if (state.value == 3) {
			if (name.value == '') {
				uni.showToast({
					title: "请输入姓名",
					icon: 'none'
				});
				return false
			} else if (grade_id.value == '') {
				uni.showToast({
					title: "请选择年级",
					icon: 'none'
				});
				return false
			} else if (age.value == '') {
				uni.showToast({
					title: "请输入年龄",
					icon: 'none'
				});
				return false
			} else if (sex.value == '') {
				uni.showToast({
					title: "请选择性别",
					icon: 'none'
				});
				return false
			} else {
				studentRegister({
					phone: phone.value,
					code: code.value,
					password: password.value,
					name: name.value,
					age: age.value,
					sex: sex.value,
					grade_id: grade_id.value
				}).then(res => {
					if (res.code == 1) {
						state.value += 1
						// 保存token
						uni.setStorageSync('UserTokenKey', res.data)
					}
				})
			}
		}
	}


	function Gohome() {
		uni.switchTab({
			url: '/pages/index/main'
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .select-wrap {
		width: 100%;
	}

	::v-deep .uni-input-input {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24px;
		color: #040404;
	}

	.content {
		display: flex;
		flex-direction: row;
	}

	.content .left {
		width: 510px;
		height: 100vh;
		padding-top: 160rpx;
		box-sizing: border-box;
		background: #F6F5F4;
		position: relative;

		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			width: 203px;
			position: relative;
			height: 65px;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36px;
				color: #040404;
				line-height: 50px;
			}

			image {
				width: 178px;
				height: 65px;
				position: absolute;
				left: 52px;
			}

		}

		.dataLine {
			margin-top: 52px;
			display: flex;
			align-items: center;
			position: relative;

			.spt {
				width: 26px;
				height: 26px;
				background: #FFFFFF;
				border-radius: 50%;
				border: 1px solid #D5D3D2;
				margin-right: 21px;
			}

			.version {
				width: 154px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 22px;
				color: #B2B1AF;
				line-height: 26px;
				text-align: left;
				font-style: normal;
			}

			.VerticalLine {
				width: 2px;
				height: 25px;
				background: #787774;
				position: absolute;
				left: 13px;
				top: 35px;
				opacity: 0;
			}
		}

		.special {

			.spt {
				background: rgba(120, 119, 116, 0.5);
				border: 1px solid #787774;
			}

			.version {
				color: #787774;
			}

			.VerticalLine {
				opacity: 1;
			}
		}

		.iconImg {
			width: 254px;
			height: 175px;
			position: absolute;
			bottom: 52px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.content .right {
		width: 1218px;
		height: 100vh;
		background: #FFF;
		position: relative;

		.FillPhone {
			padding-top: 90px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 100%;
				display: inline-block;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 60px;
				color: #040404;
				line-height: 84px;
			}

			.UserInput {
				width: 695px;

				.iconTitle {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #787774;
					line-height: 33px;
					text-align: left;
					display: block;
					margin-bottom: 12px;
				}

				.DataBox {
					display: flex;

					.iconRegion {
						width: 156px;
						height: 72px;
						background: #FFFFFF;
						border-radius: 12px;
						margin-right: 12px;
						border: 2px solid #E8E6E4;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24px;
						color: #040404;
					}
				}

			}

			.messageBox {
				width: 695px;
				height: 110px;
				background: #F6F5F4;
				border-radius: 14px;
				margin: 60px auto;
				display: flex;
				align-items: center;

				.messageImg {
					width: 48px;
					height: 48px;
					margin: 0 25px;
				}

				.information {
					.timTitle {
						.one {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 18px;
							color: #787774;
							line-height: 26px;
							text-align: left;
						}

						.two {
							margin-left: 15px;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 18px;
							color: #040404;
							line-height: 26px;
						}
					}

					.timing {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 18px;
						color: #B2B1AF;
						padding-top: 10px;
						display: inline-block;
					}

					.special {
						color: #88BAEF !important;
					}
				}
			}
		}

		.HorizontalLine {
			width: 100%;
			height: 1px;
			background: #E4E6E8;
			position: absolute;
			bottom: 132px;
		}

		.BtnLine {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			bottom: 40px;
			width: 100%;

			.PreviousBtn {
				width: 160px;
				height: 68px;
				background: #F6F5F4;
				border-radius: 14px;
				border: 1px solid #787774;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-left: 50px;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #040404;
				}

				image {
					width: 32px;
					height: 32px;
					margin-right: 16px;
				}
			}

			.NextBtn {
				width: 160px;
				height: 68px;
				background: #040404;
				border-radius: 14px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-right: 50px;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #FFFFFF;
				}

				image {
					width: 32px;
					height: 32px;
					margin-left: 16px;
				}
			}

			.hide {
				opacity: 0;
			}
		}
	}

	.content .right .confirmPassword {
		.DataBox {
			height: 72px;
		}
	}

	.content .userInfo {
		width: 1042px;
		margin: 0 auto;

		.dataFlex {
			width: 100%;
			padding: 0 88px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.FlexItem {

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #787774;
					line-height: 33px;
					text-align: left;
					margin-bottom: 12px;
				}

			}
		}
	}

	.registration {
		padding-top: 150px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.firstTitle {
			display: flex;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 80px;
				color: #040404;
				line-height: 112px;
			}

			image {
				width: 113px;
				height: 113px;
			}
		}

		.btn {
			width: 240px;
			height: 68px;
			background: #2283E2;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24px;
			color: #FFFFFF;
			margin: 112px auto 150px;
		}

		.bottomImg {
			width: 1548* 0.8px;
			height: 277px;
		}
	}
</style>